<template>
  <div class="wrapper">
    <div class="content">
      <h1>热门电视剧</h1>
      <div class="grid">
        <!-- 左侧电影选择 -->
        <div class="article">
          <!-- 可以切换组件的div -->
          <div class="main">
            <div class="explore">
              <!-- 选择类型title -->
              <div class="explore-title">
                <div class="explore-selectors">
                  <div class="explore-selectors-main">
                    <div class="explore-selectors-item">
                      <div class="explore-selectors-item-title">
                        <span>类型</span>
                        <img src="../assets/下拉.png" alt="" />
                      </div>
                    </div>
                    <div class="explore-selectors-item">
                      <div class="explore-selectors-item-title">
                        <span>地区</span>
                        <img src="../assets/下拉.png" alt="" />
                      </div>
                    </div>
                    <div class="explore-selectors-item">
                      <div class="explore-selectors-item-title">
                        <span>标签</span>
                        <img src="../assets/下拉.png" alt="" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 各种类型电影详情展示区域 -->
              <div class="explore-main">
                <ul class="explore-list">
                  <li>
                    <a href="">
                      <!-- 每个电影简介 -->
                      <div class="card">
                        <!-- 海报 -->
                        <div class="card-cover">
                          <div class="card-cover-container">
                            <img src="" alt="" class="card-cover-pic" />
                          </div>
                        </div>
                        <!-- 信息 -->
                        <div class="card-main">
                          <div class="card-main-info">
                            <div class="info-title">
                              <span>双轨人生</span>
                              <div class="info-subtitle">
                                2022 / 美国 / 剧情 喜剧 爱情 / 瓦努莉·卡修 /
                                丽丽·莱因哈特 安德丽·萨维奇
                              </div>
                            </div>
                          </div>
                          <!-- 评分 -->
                          <div class="card-main-rate"></div>
                        </div>
                      </div>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧功能待定 -->
        <div class="aside"></div>
      </div>
    </div>
  </div>
  <!-- <router-view></router-view> -->
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "../css/movie.css";
</style>